@import "./pag";


.card {
  .title {
    border-radius: 5px 5px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--bg);
    padding: 20px 20px 10px 20px;
    background-color: var(--card_bg);

    h2 {
      font-size: 20px;
    }

    > div {
      a {
        font-size: 14px;
      }
    }
  }

  .body {
    padding: 10px 20px 20px 20px;
    background-color: var(--card_bg);
    border-radius: 0 0 5px 5px;
  }
}

#app {

  .main {
    width: 1200px;
    min-height: 200px;
    display: flex;
    justify-content: space-between;

    > div > div {
      margin-bottom: 20px;
    }

    .left {
      width: 69%;

      .boutique_article > .title {
        .switch_article_category {
          span {
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;

            &:hover {
              color: var(--active);
            }

            &[active] {
              color: var(--active);
            }
          }
        }
      }

      .boutique_article > .body {
        padding: 0 20px;

        > ul {
          display: flex;
          flex-wrap: wrap;

          > li {
            width: 50%;
            box-sizing: border-box;
            display: flex;
            padding: 10px 0;

            &:nth-child(1), &:nth-child(3), &:nth-child(5) {
              border-right: 1px solid var(--bg);

              .right {
                padding-right: 10px;
              }
            }

            &:nth-child(2), &:nth-child(4), &:nth-child(6) {
              padding: 10px;
            }

            &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) {
              border-bottom: solid 1px var(--bg);
            }

            .left {
              width: 40%;

              > div {
                width: 100%;
                height: 80px;
                overflow: hidden;

              }

              img {
                width: 100%;

                &:hover {
                  transform: scale(1.1);
                  transition: all 0.3s;
                }
              }
            }

            .right {
              padding-left: 10px;
              width: 60%;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              h2 {
                font-size: 20px;
              }

              // 单行截断
              p {
                overflow: hidden;
                white-space: nowrap; // 多行状态下不换行
                text-overflow: ellipsis;
              }

              span {
                font-size: 14px;
                color: var(--font_2);

              }
            }
          }
        }
      }

      .hot_list > .body {
        > div {
          display: flex;
          font-size: 14px;


          .index {
            width: 20px;
            height: 20px;
            border-radius: 5px;
            color: var(--font_2);
            display: flex;
            margin-right: 20px;


          }

          a {
            width: 75%;
            color: var(--active);

          }

          .num {
            width: 20%;
            display: flex;
            justify-content: right;
          }
        }
      }

      .all_article > .body {
        background-color: transparent;
        padding: 0;

        > .article_content {
          width: 100%;

          > li {
            width: 100%;
            display: flex;
            background-color: var(--card_bg);
            margin-bottom: 20px;
            border-radius: 5px;
            position: relative;
            overflow: hidden;

            &:first-child {
              &:first-child {
                border-radius: 0 0 5px 5px;
              }

              .left {
                padding: 10px 10px 20px 20px;

              }

              .right {
                padding: 10px 20px 20px 10px;

              }
            }

            .left {
              width: 30%;
              padding: 25px 10px 20px 20px;
              box-sizing: border-box;

              > div {
                width: 100%;
                height: 100px;
                overflow: hidden;
                border-radius: 5px;
              }

              img {
                width: 100%;

                &:hover {
                  transform: scale(1.1);
                  transition: all 0.3s;
                }
              }
            }

            .right {
              width: 70%;
              padding: 20px 10px 20px 20px;
              position: relative;

              > h2 {
                font-size: 23px;
                margin-bottom: 5px;
                a{
                  color: var(--font_1);
                }
              }

              //多行截断
              p {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 25px;
                color: var(--font_2);
              }

              .article_info {
                font-size: 14px;
                color: var(--font_2);

                > span {
                  margin-right: 10px;

                  i {
                    margin-right: 5px;
                  }
                  i.show{
                    color: var(--active);
                  }
                }
              }

              > a {
                position: absolute;
                right: 20px;
                bottom: 20px;
                width: 100px;
                height: 30px;
                color: var(--card_bg);
                background-color: var(--btn);
                border: none;
                border-radius: 5px;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
              }
            }

            .category_flag {
              position: absolute;
              top: 18px;
              right: -75px;
              width: 200px;
              height: 25px;
              font-size: 16px;
              background-color: var(--font_del);
              color: white;
              display: flex;
              justify-content: center;
              align-items: center;
              transform: rotate(45deg);

              &[len="4"] {
                font-size: 14px;
              }

              &[type="后端"] {
                background-color: var(--active);
              }

            }
          }
        }
      }

    }

    .right {
      width: 30%;

      .tags > .body {
        position: relative;

        ul {
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;

          @keyframes move_box {
            0% {
              left: 0;
              top: 0;
            }
            25% {
              left: calc(100% - 20px);
              top: 0;
            }
            50% {
              top: calc(100% - 20px);
              left: calc(100% - 20px);
            }
            75% {
              left: 0;
              top: calc(100% - 20px);
            }
            100% {
              left: 0;
              top: 0;
            }
          }


          &::before {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            height: 20px;
            width: 20px;
            content: "";
            background-color: var(--active);

            -webkit-animation: move_box;
            animation-name: move_box;
            -webkit-animation-duration: 5s;
            animation-duration: 5s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

          }

          li {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 33.33%;
            height: 40px;
            box-sizing: border-box;

            &:nth-child(6n+1), &:nth-child(6n+2), &:nth-child(6n+3) {
              background-color: var(--bg_darken);
            }

            &:nth-child(6n+1), &:nth-child(6n+2) {
              border-right: 1px solid var(--bg_darken);
            }
          }
        }
      }

      .site_info > .body {
        .item {
          margin-bottom:10px ;
        }

        .images {
          display: flex;
          margin-top: 10px;
          margin-right: 10px;
          >div{
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          img{
            height: 140px;
            border-radius: 5px;
          }
        }
      }

      .feedback > .body{
        .el-input, .el-textarea{
          margin-bottom: 10px;

        }
        .el-button{
          width: 100%;
        }

      }
    }

  }


}
